---
title: Guidelines
redirect_from:
  - /components/textlink/
---

<ReactExample exampleId="TextLink-default" />

## When to use

If you're unsure what component or type to use for actions,
check out our [interactive guide on action components](/guides/using-button-type-components/).

- To make text inside paragraphs or lists actionable.
- To offer external navigation that doesn't draw too much attention.
- To offer action text that's long.

## When not to use

- For actions outside text related to the current screen
  or navigating within your app---use a [button link](/components/action/buttonlink/).
- For a single action you want to draw attention to---use a [button](/components/action/button/).

## Component status

<ComponentStatus component="TextLink" />

## Content structure

![Text: describes the link purpose and works best when short; icon: optionally visually supports the link.](fileId:4QJZqvBvRrLu6t9mwObCkA;nodeId:216%3A8)

## Behavior

### Use for navigation

Text links work best for navigating users.
They present a familiar pattern where users are used
to being redirected to another part of your app or some place external.

For actions within the same screen, such as adding passengers,
use a different action component, such as a [button link](/components/action/buttonlink/).

### Make actions clear

It should be clear from the link text exactly what happens when the user interacts with it.
The text can be actionable, such as "Read all reviews",
or descriptive of what's described at the link,
such as "[Kiwi.com Guarantee](https://www.kiwi.com/en/pages/guarantee)".

The link stands out from the surrounding text.
Its text is also used separately by screen readers
to make the link [accessible to everyone](/foundation/accessibility/).

So it's best if the link text makes sense out of context---just by looking at the text itself.
Avoid text like "here" or many repetitions of "learn more".
Try to include nouns or specific details in the link itself.

Some examples of what to have and not have as the text within the link:

<GuidelinesSideBySide>

<Do>

- Guidelines
- Orbit design system
- Learn more

</Do>

<Dont>

- Click here
- Read more about the Orbit design system
- Learn more.

</Dont>

</GuidelinesSideBySide>

### Use only with text

Text links are designed to go together with surrounding text.
They inherit their basic characteristics from the parent so that they fit in.
They're also clearly aligned with other text to present a coherent whole.

If you need actions that stand alone, use [button links](/components/action/buttonlink/).

### Show unexpected results

Text links look much like surrounding text.
If something unexpected happens on interaction,
let users know.
For example, use a new-window icon together with a clear label for screen readers
to let users know a link opens in a new window/tab.

<ReactExample exampleId="TextLink-icons" />

## Look & feel

### Sizing

Text links inherit their default size from their parent.
You can override this size.

<ReactExample exampleId="TextLink-sizes" />

### Color

Text links should align with the color of text around them.
Usually, this means using the default [primary color](#primary-color).

When the text link is part of or next to [text with a different color](/components/text/#text-color),
the text link can have its color align with other text.
(It's always darker to make it clear it has an action.)

<ReactExample exampleId="TextLink-types" />

Do **_not_** use different colors for standalone text links.
The colors aren't for emphasis or to draw attention.

#### Primary color

The primary color of text links is <InlineToken name="colorTextLinkPrimary" alternateName />.
This is a darker color than other primary actions, such as primary [buttons](/components/action/button/).

The color for text links is darker so it has enough contrast with surrounding text.
